<template>
  <div class="home">
    <van-swipe class="my-swipe" :autoplay="5000" lazy-render>
      <van-swipe-item v-for="image in images" :key="image">
        <img :src="image" />
      </van-swipe-item>
    </van-swipe>
    <public-title title="训练日历" icon="notes-o" />
    <van-calendar
      :show-title="false"
      :poppable="false"
      :formatter="formatter"
      switch-mode="month"
      :show-confirm="false"
      :style="{ height: '400px' }"
    />
    <public-title title="康复训练" icon="shield-o" />
    <van-card
      v-for="i in 5"
      :key="i"
      num="2"
      :tag="i % 2 === 0 ? '精选' : ''"
      price="2.00"
      desc="描述信息"
      title="商品标题"
      thumb="https://fastly.jsdelivr.net/npm/@vant/assets/ipad.jpeg"
      origin-price="10.00"
    />
    <public-title title="膳食管理" icon="records-o" />
    <van-card
      v-for="i in 5"
      :key="i"
      num="2"
      :tag="i % 2 === 0 ? '精选' : ''"
      price="2.00"
      desc="描述信息"
      title="商品标题"
      thumb="https://fastly.jsdelivr.net/npm/@vant/assets/ipad.jpeg"
      origin-price="10.00"
    />
  </div>
</template>

<script setup>
const images = [
  'https://fastly.jsdelivr.net/npm/@vant/assets/apple-1.jpeg',
  'https://fastly.jsdelivr.net/npm/@vant/assets/apple-2.jpeg',
]

const formatter = day => {
  const month = day.date.getMonth() + 1
  const date = day.date.getDate()

  if (month === 7) {
    if (date === 15) {
      day.topInfo = '测试1'
    } else if (date === 24) {
      day.topInfo = '测试2'
    } else if (date === 27) {
      day.text = '今天'
    }
  }

  return day
}
</script>

<style lang="less" scoped>
.my-swipe .van-swipe-item {
  img {
    width: 100%;
    height: 200px;
  }
}
</style>
